<template>
  <div>
    <el-dialog title="编辑文档信息"
               :visible.sync="dialogVisible"
               @close="DialogClose">
      <el-form ref="documentForm"
               :model="documentForm"
               label-width="80px">
        <el-form-item label="标题"
                      prop="document_title">
          <el-input style="width:200px"
                    v-model="documentForm.document_title"></el-input>
        </el-form-item>
        <el-form-item label="内容"
                      prop="content">
          <el-input v-model="document.content"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-tag :key="tag.id"
                  v-for="tag in dynamicTags"
                  closable
                  style="margin-right:15px;"
                  :disable-transitions="false"
                  @close="handleClose(tag)">
            {{tag.tag_name}}
          </el-tag>
          <el-button class="button-new-tag"
                     size="small"
                     @click="showTagDialog">
            <i class="el-icon-circle-plus-outline"></i>
            添加标签</el-button>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="DialogClose">取 消</el-button>
        <el-button type="primary"
                   @click="EditDocument">确 定</el-button>
      </div>
      <TagDialog :ShowTagDialogVisible="ShowTagDialogVisible"
                 @closeTagDialog="closeTagDialog" />
    </el-dialog>
  </div>
</template>

<script>
import TagDialog from '../Article/TagDialog'
export default {
  props: {
    showEditDialogVisible: {
      type: Boolean,
      required: true
    },
    document: {
      type: Object,
      required: true
    }
  },
  components: {
    TagDialog
  },
  data () {
    return {
      dialogVisible: false,
      ShowTagDialogVisible: false,
      dynamicTags: [],
      documentForm: {},
      isEdit: false,
      tagList: []
    };
  },
  computed: {

  },
  watch: {
    showEditDialogVisible: {
      immediate: true,
      handler (val) {
        this.dialogVisible = val;
      }
    },
    document: {
      immediate: true,
      handler (val) {
        this.documentForm = val;
      }
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    // 关闭文档编辑窗口回调
    DialogClose () {
      this.dialogVisible = false
      this.$emit("closeDialog")
    },
    // 确定编辑文档
    async EditDocument () {
      // 整理参数
      const { documentForm } = this
      const data = this.$qs.stringify(
        {
          document_id: documentForm.id,
          title: documentForm.document_title,
          ...documentForm
        }
      )
      const res = await this.$API.document.alterDocument(data)
      if (res.status == 200) {
        this.$message.success("修改成功")
        this.DialogClose()
      }
    },
    // 展示Tag对话框
    showTagDialog () {
      this.ShowTagDialogVisible = true
      this.$bus.$on("getTagsId", this.getTagList)
    },
    // 获取tag列表
    getTagList (item) {
      this.documentForm.tag_ids = item.tags_id
      // 重置数组
      this.dynamicTags = []
      let tagList = []
      item.tagList.forEach(tag => {
        tagList.push(tag)
      })
      this.dynamicTags.push(...tagList)
    },
    // 删除tag
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      let tagList = this.videoForm.tag_ids.split(",")
      console.log(tag)
      this.documentForm.tag_ids = tagList.filter(t => {
        return tag.id != t
      }).join(",")
    },
    // 关闭tag对话框
    closeTagDialog () {
      this.ShowTagDialogVisible = false
    }
  },
};
</script>

<style scoped lang="less">
</style>
